@use "../common/vars" as *;

// Base
:root {
  --font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Courier New", Courier, monospace;
}

// Light
:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-dark: #f5f5f5;
  --bg-darker: #d4d4d4;
  --fg: #555;
  --fg-light: #888;
  --fg-dark: #222;
  --fg-darker: #000;

  --divider: #dcdfe6;
  --divider-light: #ebeef5;
  --divider-dark: #cdd0d6;
  --accent: #0d99ff;
  --accent-rgb: 16, 185, 129;
  --accent-light: #34d399;
  --accent-dark: #007bef;

  --text-body: 1rem;
  --leading-body: 1.5rem;
}

// Dark
:root.dark {
  color-scheme: dark;

  --bg: #141414;
  --bg-dark: #181818;
  --bg-darker: #000000;
  --fg: #bbbbbb;
  --fg-dark: #dddddd;
  --fg-darker: #ffffff;

  --divider: #4c4d4f;
  --divider-light: #363637;
  --divider-dark: #636466;
}

:root[data-font-size="small"] {
  --text-body: 0.75rem;
  --leading-body: 1rem;
}

:root[data-font-size="medium"] {
  --text-body: 0.875rem;
  --leading-body: 1.25rem;
}

html:not(.dark) {
  --prism-foreground: #393a34;
  // --prism-background: #fbfbfb;
  --prism-background: #f8f8f8;
  --prism-comment: #a0ada0;
  --prism-string: #b56959;
  --prism-literal: #2f8a89;
  --prism-number: #296aa3;
  --prism-keyword: #1c6b48;
  --prism-function: #6c7834;
  --prism-boolean: #1c6b48;
  --prism-constant: #a65e2b;
  --prism-deleted: #a14f55;
  --prism-class: #2993a3;
  --prism-builtin: #ab5959;
  --prism-property: #b58451;
  --prism-namespace: #b05a78;
  --prism-punctuation: #8e8f8b;
  --prism-decorator: #bd8f8f;
  --prism-regex: #ab5e3f;
  --prism-json-property: #698c96;
}

html.dark {
  --prism-foreground: #d4cfbf;
  // --prism-background: #151515;
  --prism-background: #101010;
  --prism-comment: #758575;
  --prism-string: #d48372;
  --prism-literal: #429988;
  --prism-keyword: #4d9375;
  --prism-boolean: #1c6b48;
  --prism-number: #6394bf;
  --prism-variable: #c2b36e;
  --prism-function: #a1b567;
  --prism-deleted: #a14f55;
  --prism-class: #54b1bf;
  --prism-builtin: #e0a569;
  --prism-property: #dd8e6e;
  --prism-namespace: #db889a;
  --prism-punctuation: #858585;
  --prism-decorator: #bd8f8f;
  --prism-regex: #ab5e3f;
  --prism-json-property: #6b8b9e;
  --prism-line-number: #888888;
  --prism-line-number-gutter: #eeeeee;
  --prism-line-highlight-background: #444444;
  --prism-selection-background: #444444;
}
